<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 15 },
  };

  const economicOverview = reactive({
    totalInvestmentCost: '',
    operationMaintenanceCosts: '',
    accumulatedDischargeCapacity: '',
    accumulatedPowerGeneration: '',
    accumulatedIncome: '',
    investmentPaybackPeriod: '',
  });

  const costBreakdown = reactive({
    equipmentProcurementCost: '',
    installationCost: '',
    operationMaintenanceCosts: '',
    financingCost: '',
  });

  const profitAnalysis = reactive({
    selfUseRevenue: '',
    onlineRevenue: '',
  });

  const cashFlowAnalysis = reactive({
    annualIncome: '',
    annualExpenditure: '',
  });

  const paybackPeriodCalculation = reactive({
    investmentPaybackPeriod: '',
  });

  const economicIndicators = reactive({
    internalRateReturn: '',
    netPresentValue: '',
    returnOnInvestment: '',
    explanationCalculationProcess: '',
  });

  const option1 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
  const option2 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
  const option3 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
  const option4 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
  const option5 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
  const option6 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
  const option7 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
</script>

<template>
  <div class="container">
    <a-row :gutter="[10, 10]">
      <a-col :span="12">
        <a-card title="经济性概览">
          <a-row>
            <a-col :span="12">
              <a-form v-bind="layout" :model="economicOverview">
                <a-form-item label="总投资成本" name="totalInvestmentCost">
                  <a-input v-model:value="economicOverview.totalInvestmentCost" />
                </a-form-item>
                <a-form-item label="运行维护成本" name="operationMaintenanceCosts">
                  <a-input v-model:value="economicOverview.operationMaintenanceCosts" />
                </a-form-item>
                <a-form-item label="累计放电量" name="accumulatedDischargeCapacity">
                  <a-input v-model:value="economicOverview.accumulatedDischargeCapacity" />
                </a-form-item>
                <a-form-item label="累计发电量" name="accumulatedPowerGeneration">
                  <a-input v-model:value="economicOverview.accumulatedPowerGeneration" />
                </a-form-item>
                <a-form-item label="累计收益" name="accumulatedIncome">
                  <a-input v-model:value="economicOverview.accumulatedIncome" />
                </a-form-item>
                <a-form-item label="投资回收期" name="investmentPaybackPeriod">
                  <a-input v-model:value="economicOverview.investmentPaybackPeriod" />
                </a-form-item>
              </a-form>
            </a-col>
            <a-col :span="12">
              <div class="charts">
                <div class="title">每年运行成本和收益：</div>
                <div class="chart">
                  <eChart :option="option1" name="option1" />
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="成本明细">
          <a-row>
            <a-col :span="12">
              <a-form v-bind="layout" :model="costBreakdown">
                <a-form-item label="设备采购成本" name="equipmentProcurementCost">
                  <a-input v-model:value="costBreakdown.equipmentProcurementCost" />
                </a-form-item>
                <a-form-item label="安装成本" name="installationCost">
                  <a-input v-model:value="costBreakdown.installationCost" />
                </a-form-item>
                <a-form-item label="运行维护成本" name="operationMaintenanceCosts">
                  <a-input v-model:value="costBreakdown.operationMaintenanceCosts" />
                </a-form-item>
                <a-form-item label="融资成本" name="financingCost">
                  <a-input v-model:value="costBreakdown.financingCost" />
                </a-form-item>
              </a-form>
            </a-col>
            <a-col :span="12">
              <div class="charts">
                <div class="title">各项成本年度分布图表：</div>
                <div class="chart">
                  <eChart :option="option2" name="option2" />
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="收益分析" class="three">
          <a-row>
            <a-col :span="24">
              <a-form v-bind="layout" :model="profitAnalysis">
                <a-form-item label="自用电量收益" name="selfUseRevenue">
                  <a-input v-model:value="profitAnalysis.selfUseRevenue" />
                </a-form-item>
                <a-form-item label="上网电量收益" name="onlineRevenue">
                  <a-input v-model:value="profitAnalysis.onlineRevenue" />
                </a-form-item>
              </a-form>
              <div class="charts">
                <div class="title">发电收益年度趋势图和柱状图：</div>
                <div class="chart">
                  <eChart :option="option3" name="option3" />
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="现金流分析" class="three">
          <a-row>
            <a-col :span="12">
              <a-form v-bind="layout" :model="cashFlowAnalysis">
                <a-form-item label="年度收入" name="annualIncome">
                  <a-input v-model:value="cashFlowAnalysis.annualIncome" />
                </a-form-item>
                <a-form-item label="年度支出" name="annualExpenditure">
                  <a-input v-model:value="cashFlowAnalysis.annualExpenditure" />
                </a-form-item>
              </a-form>
              <div class="charts">
                <div class="title">年度现金流趋势图：</div>
                <div class="chart">
                  <eChart :option="option4" name="option4" />
                </div>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="charts">
                <div class="title">净现金流和累计现金流：</div>
                <div class="chart other">
                  <eChart :option="option5" name="option5" />
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="投资回收期计算" class="five">
          <a-form v-bind="layout" :model="paybackPeriodCalculation">
            <a-form-item label="投资回收期" name="investmentPaybackPeriod">
              <a-input v-model:value="paybackPeriodCalculation.investmentPaybackPeriod" />
            </a-form-item>
          </a-form>
          <div class="charts">
            <div class="title">盈亏平衡图</div>
            <div class="chart">
              <eChart :option="option6" name="option6" />
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="15">
        <a-card title="经济性指标">
          <a-row>
            <a-col :span="12">
              <a-form v-bind="layout" :model="economicIndicators">
                <a-form-item label="内部收益率（IRR）" name="internalRateReturn">
                  <a-input v-model:value="economicIndicators.internalRateReturn" />
                </a-form-item>
                <a-form-item label="净现值（NPV）" name="netPresentValue">
                  <a-input v-model:value="economicIndicators.netPresentValue" />
                </a-form-item>
                <a-form-item label="投资回报率（ROI）" name="returnOnInvestment">
                  <a-input v-model:value="economicIndicators.returnOnInvestment" />
                </a-form-item>
                <a-form-item label="指标解释和计算过程" name="explanationCalculationProcess">
                  <a-input v-model:value="economicIndicators.explanationCalculationProcess" />
                </a-form-item>
              </a-form>
            </a-col>
            <a-col :span="12">
              <div class="charts">
                <div class="title">每年运行成本和收益:</div>
                <div class="chart">
                  <eChart :option="option7" name="option7" />
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
  .ant-card {
    width: 100%;
    min-height: 440px;
  }
  .chart {
    width: 100%;
    height: 300px;
  }

  .three {
    min-height: 490px;
    .chart {
      width: 100%;
      height: 340px;
    }
    .other {
      height: 455px;
    }
  }

  .five {
    min-height: 588px;
    .chart {
      width: 100%;
      height: 395px;
    }
  }
  .title {
    margin-bottom: 10px;
  }
</style>
